<template>
	<view class="dianpu-info-box">
		<u-form :model="form" ref="uForm">
			<u-form-item label="店铺logo" labelWidth="140rpx"></u-form-item>
			<u-form-item>
				<u-upload ref="uUpload" action="http://www.example.com/upload" :show-tips="false" @on-remove="onRemove">
				</u-upload>
			</u-form-item>
			<u-form-item label="店铺名称" labelWidth="140rpx">
				<u-input placeholder="请输入店铺名称"></u-input>
			</u-form-item>
			<u-form-item label="店铺公告" labelWidth="140rpx">
				<u-input placeholder="请输入店铺公告"></u-input>
			</u-form-item>
			<u-form-item label="主营类目" labelWidth="140rpx">
				<u-input placeholder="请选择主营类目" disabled  @tap="show = true" v-model="roleName"></u-input>
				<u-icon name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="店铺地址" labelWidth="140rpx">
				<u-input placeholder="请输入店铺地址"></u-input>
			</u-form-item>
			<u-form-item label="客服电话" labelWidth="140rpx">
				<u-input placeholder="请输入客服电话"></u-input>
			</u-form-item>
			<u-form-item label="微信号" labelWidth="140rpx">
				<u-input placeholder="请输入微信号"></u-input>
			</u-form-item>
			<u-form-item label="微信二维码" labelWidth="150rpx">
			</u-form-item>
			<u-form-item>
				<u-upload ref="uUpload" action="http://www.example.com/upload" :show-tips="false" @on-remove="onRemove">
				</u-upload>
			</u-form-item>
		</u-form>
		<view class="submit-btn">
			<text>提交</text>
		</view>
		<u-picker v-model="show" mode="selector" :range="selectorObj" range-key="cateName" @confirm="confirmWork"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				roleName:"",
				form:{},
				selectorObj: [{
						cateName: '品类1',
						id: 1
					},
					{
						cateName: '品类2',
						id: 2
					}
				]
			}
		},
		methods: {
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			confirmWork(e){
				this.roleName = this.selectorObj[e[0]].cateName;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.dianpu-info-box{
		padding: 20rpx;
	}
	.submit-btn{
		width: 90%;
		background: linear-gradient(90deg, #2dae9c, #6bc29e);
		border-radius: 50rpx;
		padding: 20rpx 0;
		color: #fff;
		text-align: center;
		margin: 40rpx auto;
	}
</style>
